<template>
  <div>
    <header class="">
      <div class="navbar navbar-default visible-xs">
        <button type="button" class="navbar-toggle collapsed">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="/" class="navbar-brand">在线视频教育平台</a>
      </div>

      <nav class="sidebar">
        <div class="navbar-collapse" id="navbar-collapse">
          <div class="site-header hidden-xs">
            <a class="site-brand" href="/" title="">
              <img class="img-responsive site-logo" alt="" src="../assets/assets_2/images/mashup-logo.svg">
              在线视频教育平台
            </a>
            <p>
              课程分类

            </p>
          </div>
          <ul class="nav">
            <li><a href="/" title="">首页</a></li>
            <li>
              <router-link to="/mypage">我的主页</router-link>
            </li>
            <li>

              <!-- <a href="/upload" title="上传课程">上传课程</a> -->

              <router-link to='/upload'>上传课程</router-link>

            </li>
            <li>

              <router-link to='/order'>我的订单</router-link>

            </li>
            <li>

              <router-link to='/client'>我的客服</router-link>

            </li>
            <li><a href="./components.html" title="">Components</a></li>

          </ul>

          <div>

            <div v-if="username==''">
              <router-link to="/login">
                登录
              </router-link>
              /
              <router-link to="/register">
                注册
              </router-link>
            </div>

            <div v-else>
              欢迎您：{{ username }} &nbsp;&nbsp; <a href="#" @click="logout">注销</a>
            </div>

          </div>

        </div>
      </nav>

    </header>
  </div>
</template>

<script>
  export default {
    name: "myheader",
    data() {
      return {
        msg: '',
        // 用户名展示
        username: '',
      }
    },
    // 钩子方法
    mounted: function () {
      // 手动将钉钉/微博账号登录
      // 接受参数
      var ding_id = this.$route.query.ding_id;
      var sina_id = this.$route.query.sina_id;

      if (ding_id) {
        // 自动登录
        localStorage.setItem('username', ding_id)
        localStorage.setItem('uid', this.$route.query.uid)
      }

      if (sina_id) {
        // 自动登录
        localStorage.setItem('username', sina_id)
        localStorage.setItem('uid', this.$route.query.uid)
      }
      // 判断用户是否登录
      var uname = localStorage.getItem('username');
      if (uname == null) {
        this.username = '';
      } else {
        this.username = uname
      }
    },

    // 自定义方法
    methods: {
      // 注销
      logout: function () {
        // 删除username
        localStorage.removeItem('username')

        // 全部删除
        // localStorage.clear()

        // 清空
        this.username = '';

        // 跳转
        this.$router.push('/login')
      }
    }
  }
</script>

<style scoped>

</style>
